<template>
  <view class="wrap">
    <u-navbar :is-back="false" title="" :border-bottom="false">
      <view class="u-flex u-row-right" style="width: 100%;">
        <view class="camera u-flex u-row-center">
          <u-icon name="camera-fill" color="#000000" size="48"></u-icon>
        </view>
      </view>
    </u-navbar>

    <view class="center">
      <u-avatar :src="vuex_user.stu_pic" size="140"></u-avatar>
      <view class="username u-p-b-20">{{vuex_user.stu_name}}</view>
      <view class="u-font-14 u-tips-color">{{vuex_user.stu_no}}</view>
    </view>
	
	<div class="info-box" v-show="vuex_user.id">
		<h3 class="info-title">个人资料</h3>
		<div class="info-row">
			<span class="label">学号</span>
			<span class="value">{{infoData.stu_no}}</span>
		</div>
		<div class="info-row">
			<span class="label">专业</span>
			<span class="value">{{infoData.major_name}}</span>
		</div>
		<div class="info-row">
			<span class="label">班级</span>
			<span class="value">{{infoData.classes_name}}</span>
		</div>
		<div class="info-row">
			<span class="label">宿舍</span>
			<span class="value">{{infoData.dorm_name}}</span>
		</div>
		<div class="info-row">
			<span class="label">生源地</span>
			<span class="value">{{infoData.stu_home}}</span>
		</div>
		<div class="info-row">
			<span class="label">身份证号码</span>
			<span class="value">{{infoData.id_card}}</span>
		</div>
		<div class="info-row">
			<span class="label">姓名</span>
			<span class="value">{{infoData.stu_name}}</span>
		</div>
		<div class="info-row">
			<span class="label">性别</span>
			<span class="value">{{infoData.gender}}</span>
		</div>
	</div>
<!--    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="rmb-circle" title="预报到" @click="openPage('/pages/template/p/precheck')"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="photo" title="学费明细" @click="openPage('/pages/template/p/feelist')"></u-cell-item>
        <u-cell-item icon="photo" title="缴费记录" @click="openPage('/pages/template/p/pay')"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="setting" title="个人信息" @click="openPage('/pages/template/p/profile')"></u-cell-item>
      </u-cell-group>
    </view> -->

    <u-gap height="70"></u-gap>
    <u-button class="custom-btn" type="primary" @click="logout" v-if="vuex_user.id">登出</u-button>
    <u-button class="custom-btn" type="primary" @click="openPage('/pages/template/p/login')" v-else>登录</u-button>

    <u-gap height="70"></u-gap>
  </view>
</template>

<script>

export default {
  data() {
    return {
      pic: 'https://uviewui.com/common/logo.png',
      show: true,
	  infoData: {}
      // desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
    }
  },
  computed: {
    getIcon() {
      return path => {
        return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
      }
    },
    desc() {
      return this.$t('template.desc');
    }
  },
  created() {
    this.detail()
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t('nav.template')
    });
  },
  methods: {
    logout() {
      let that = this
      this.$u.post('/student/logout', this.model).then(res => {
        uni.showToast({
          title: '登出成功',
          duration: 2000
        })
        that.$u.vuex('vuex_user', {})
        uni.switchTab({
          url: '/pages/example/components'
        })
      })
    },
    getGroupTitle(item) {
      return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
    },
    getFieldTitle(item) {
      return this.$i18n.locale == 'zh' ? item.title : item.title_en
    },
	detail() {
	  this.$u.get('/student/detail', {
	    id: 2
	  }).then(res => {
	    console.log(res)
	    this.infoData = res;
	  })
	},
	openPage(path) {
	  console.log(this.vuex_user)
	  console.log(path)
	  if (path.indexOf("login") > 0 || this.vuex_user.id) {
	    this.$u.route({
	      url: path.indexOf('/page') == 0 ? path : '/pages/template/' + path + '/index'
	    })
	  } else {
	    uni.showToast({
	      title: '请先登录',
	    icon: 'none',
	      duration: 2000
	    })
	  }
	},
  }
}
</script>

<style>
/* page {
  background-color: rgb(240, 242, 244);
} */
</style>

<style lang="scss" scoped>
.center {
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.u-cell-icon {
  width: 36 rpx;
  height: 36 rpx;
  margin-right: 8 rpx;
}
.username{
	font-size: 50rpx;
	font-weight: 900;
	margin-top: 20rpx;
}
.info-box{
	margin: 0 auto;
	width: calc(90% - 80rpx);
	border: #F0F0F0 2px solid;
	border-radius: 10px;
	padding: 40rpx;
	color: #2A2D41;
	margin-top: 50rpx;
	.info-title{
		margin-bottom: 30rpx;
	}
	.info-row{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		.label{
			font-weight: 600;
		}
		.value{
			color: #B2B3B0;
		}
	}
}
</style>
